<template>
    <div>
        <el-dialog title="配置权限" width="60%" :show-close="false" :visible.sync="dialogAllocationVisible"
            :close-on-click-modal="false" style="height: 100%;" custom-class="customclassdialog">
            <div v-loading="loading" element-loading-text="Loading..." element-loading-spinner="el-icon-loading"
                  style="overflow-y: auto;"
                :style="'max-height:' + windowHeight / 2 + 'px;'">
                <el-tree ref="treeq" :props="propsda" default-expand-all :data="roleData" node-key="id" show-checkbox
                    >
                </el-tree>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">关 闭</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import screenSelect from '@/components/screenSelect/index.vue';
import { getRoleMenu, getRoleMenuPost } from '@/api/staff.js'
export default {
    name: 'WorkspaceJsonSystemallocation',
    components: {
        screenSelect
    },
    props: {
        optionVal: {
            type: Object
        },
        dialogAllocationVisible: {
            type: Boolean
        }
    },
    watch: {
        optionVal: {
            handler(ne, ol) {
                this.form = ne
            },
            deep: true,
            immediate: true
        }
    },
    data() {
        return {
            loading: true,
            formLabelWidth: '100px',
            form: {},
            propsda: {
                label: 'name',
                children: 'child'
            },
            roleData: [],
            checkedids: [],
            windowHeight: 0
        };
    },
    mounted() {
        this.windowHeight = document.body.clientHeight;
        this.getRoleList()
    },
    methods: {
        getRoleList() {
            let that = this
            getRoleMenu(that.form).then(res => {
                if (res.code == 200) {
                    console.log(res.data);
                    // that.checkedids = that.checkedidsHeld(res.data)
                    that.roleData = res.data
                    setTimeout(() => {
                        that.checkedidsHeld(res.data).map(i => {
                            let node = that.$refs.treeq.getNode(i);
                            if (node && node.isLeaf) {
                                that.$refs.treeq.setChecked(node, true)
                            }
                        })
                    }, 100);
                    that.loading = false
                }
            })
        },
        checkedidsHelds(data) {
            let arr = []
            data.map(item => {
                if (item.checked == 'true') {
                    arr.push(item.id)
                }
                if (item.child || item.child.length > 0) {
                    item.child.map(v => {
                        if (v.checked == 'true') {
                            arr.push(v.id)
                        }
                    })
                }
            })
            console.log(arr, '123');
            return arr
        },
        checkedidsHeld(data) {
            let arr = []
            data.map(item => {
                if (item.checked) {
                    arr.push(item.id)
                }
                if (item.child || item.child.length > 0) {
                    item.child.map(v => {
                        if (v.checked) {
                            arr.push(v.id)
                        }
                    })
                }
            })
            console.log(arr, '1234');
            return arr
        },
        handleCheckChange(data, checked, indeterminate) {
            console.log(data, checked, indeterminate, '111');
        },
        valueHeld(childParam, fatherparam) {
            this.form[fatherparam] = childParam
        },
        cancel() {
            let e = {}
            e.dialogAllocationVisible = false
            e.form = this.form
            this.$emit('cancelHeld', e);
        },
        save() {
            let e = {}
            e.dialogAllocationVisible = false
            let data = []
            let t = this.$refs.treeq.getCheckedNodes().concat(this.$refs.treeq.getHalfCheckedNodes())
            t.map((item) => {
                data.push(item.id)
            })
            this.form.role_ids = data.join(',')
            e.form = this.form
            this.$emit('updata', e);
        },
    },
};
</script>

<style lang="scss" scoped>
// @keyframes fadeIn {
//     from {
//         opacity: 0;
//         transform: translateY(-100%);
//     }

//     to {
//         opacity: 1;
//         transform: translateY(0px);
//     }
// }

// ::v-deep .customclassdialog {
//     border-radius: 10px !important;
//     animation: fadeIn 1s ease-in-out forwards;
// }
</style>